<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天天商城-登录</title>
    <!--bootstrap-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="js/HZHHttpUtil.js"></script>
    <script src="js/CacheUtil.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;

        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #loginDiv {
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
        background-color: rgba(75, 81, 95, 0.3);
        box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 5px;
    }

    #name_trip {
        margin-left: 50px;
        color: red;
    }


    p {
        margin-top: 30px;
        margin-left: 50px;
        color: azure;
    }

   p1{
       margin-left: 50px;
   }

    input {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }
</style>
</head>
<body>

<div id="loginDiv">
    <form action="" id="form">
        <h1 style="text-align: center;color: aliceblue;">用户登录</h1>
        <p>用户名:<input id="userName" type="text" placeholder="用户名"><label id="name_trip"></label></p>
        <p>密码：<input id="password" type="password" placeholder="请输入密码"><label id="password_trip"></label></p>
        <p class="tip">验证码:<input id="code" type="text" placeholder="请输入验证码"></p>
        <p><img src="/shop-api/user/getcode" onclick="getCodeOnClick(this)"></p>

        <div style="text-align: center;margin-top: 30px;">
            <button type="button" class="button" onclick="submitLogin()">登录</button>
            <button type="reset" class="button" onclick="window.location.href=`userRegister.html`">注册</button>
        </div>
    </form>

</div>

<script>
    function getCodeOnClick(e) {
        $(e).attr("src","/shop-api/user/getcode")
        window.location.reload();
    }

    function submitLogin() {
        //ajax 请求后台登录校验
        let url = "/user/login";
        let params = {
            userName: $("#userName").val(),
            password: $("#password").val(),
            code: $("#code").val()
        };
        httpPost(url, params, function (data) {
            //登录成功
            //登录成功，保存用户信息到了浏览器缓存
            saveLoginUser(data);
            //跳转首页
            location.href = "/shop-app/homePage.html";
        })
    }
</script>

</body>
</html>